<template>
    <div class="box">
        <el-dialog v-model="modelValue">
            <template #header>
                <div>运行配置</div>
            </template>
            <div>
                <el-tabs v-model="activeName" class="tabs">
                    <el-tab-pane label="运行脚本" name="tab1">
                        <div>
                            <textarea name="yaml" id="yaml" cols="30" rows="20" v-model="code"></textarea>
                            <el-button type="primary" plain @click="transform">转换</el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="作业脚本" name="tab2">作业脚本</el-tab-pane>
                    <el-tab-pane label="配置项" name="tab3">配置项</el-tab-pane>
                    <el-tab-pane label="固定参数" name="tab4">固定参数</el-tab-pane>
                </el-tabs>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="confirm">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { watch, ref, onMounted } from 'vue';
import { json2yaml, yaml2json, topJson } from './json_yaml'
import type { treeDataType } from './index.vue'
import { ElMessage } from 'element-plus';
let props = defineProps<{
    modelValue: boolean,
    tree: treeDataType
}>()
let emit = defineEmits<{
    (e: 'update:modelValue', arg: boolean): void,
    (e: 'update:tree', arg: treeDataType): void,
    (e:'transfrom'):void
}>()
watch(() => props.modelValue, () => emit('update:modelValue', props.modelValue))


let confirm = () => emit('update:modelValue', false)
let activeName = ref('tab1')
let code = ref(``)

watch(() => props.tree, (newVal) => {
    console.log(props.tree)
    code.value = json2yaml(JSON.stringify(Object.assign(topJson, newVal))).data
}, { deep: true })
let transform = () => {
    
    let res = yaml2json(code.value, false)
    if(res.error){
        return ElMessage({
            message:'转换失败',
            type:'error'
        })
    }
    console.log(res, props.tree)
    emit('update:tree', { root: res.data.root })
    setTimeout(()=>emit('transfrom'))
    ElMessage({
        message:'转换成功',
        type:'success'
    })
}


</script>

<style lang="less" scoped>
.box {
    :deep(.el-dialog__header) {
        background: linear-gradient(90deg, #727cf5, rgba(255, 0, 0, 0));
        color: #fff;
        font-size: 18px;
    }
}

.tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
}

#yaml {
    resize: vertical;
    min-height: 200px;
    outline: none;
    padding: 5px 15px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    color: #606266;
    border: 1px solid #dcdfe6;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}

#yaml:focus {
    border-color: #1890ff;
}
</style>